﻿<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset=utf-8 />
	<title> مدونة البلوقر | تأثير صندوق الضوء | الشكل الأول </title>
	<style type="text/css">
		body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
		a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
		h2{font-size:13px; margin:15px 0 0 0;}
	.style1 {
				direction: rtl;
}
	.style2 {
				direction: rtl;
				font-weight: bold;
}
.style3 {
				font-size: medium;
				font-weight: bold;
}
.style4 {
				direction: rtl;
				font-size: medium;
				text-shadow: 0 0 5px gray;
}
.style5 {
				font-size: medium;
}
.style6 {
				direction: rtl;
				text-align: center;
}
.style7 {
				font-size: x-large;
}
.style8 {
				color: #FF0066;
}
.style9 {
				color: #0092EF;
}
.style10 {
				font-weight: normal;
				}
	.style11 {
				direction: rtl;
				font-size: medium;
				text-shadow: 0 0 5px gray;
				text-align: center;
}
.style12 {
				font-size: large;
				color: #949494;
}
	</style>
	
	<link media="screen" rel="stylesheet" href="colorbox.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="../colorbox/jquery.colorbox.js"></script>
		<script>
	$(document).ready(function(){
			// التحكم في خصائص  colorbox
			$('a[rel="image"]').colorbox({rel:'nofollow'}); // لعرض صورة واحدة
			$("a[rel='images']").colorbox(); // لعرض الصور المتتالية
			$("a[rel='imagesfade']").colorbox({transition:"fade"}); // لعرض الصور المتالية بتأثير تضائلي
			$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});// لعرض الصور المتتالية بمقاس واحد
			$("a[rel='slideshow']").colorbox({slideshow:true}); // لعرض الصور على شكل شرائح
			$(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520}); // هنا يمكنك تغيير مقاسات الفيديو
			$(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
			$(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); // تغيير مقاسات الصفحات الخارجية
		});
	</script>
	
</head>
<body style="background-image: url('http://www.backgroundlabs.com/backgrounds/456.gif'); background-attachment: fixed; margin-right: 200px;">
	
	<h1 class="style6"><span dir="rtl" class="style7"><span lang="ar-sa">أشكال</span> <span lang="ar-sa">
	تأثيرات </span><span class="style8">COLOR</span><span class="style9">BOX</span></span></h1>
	
	<h2 class="style4"><span dir="rtl">عرض صورة واحدة<span lang="ar-sa"> فقط:</span></span></h2>
	<p class="style2"><span dir="rtl" class="style5"><a href="https://lh4.googleusercontent.com/_IXiurIO55tc/TXVc2NbS_VI/AAAAAAAAAJc/WfjQRrNscV4/s720/PICT0325.jpg" rel="image" title="وصف الصورة الأولى">الصورة </a>
	</span></p>

	
	<h2 class="style4"><span dir="rtl">انتقال مرن بين الصور<span lang="ar-sa">:
	
	<span class="style10"><em>يشترط أن تكون الصور متتالية كأنها جاليري</em></></span></span></h2>
	<p class="style1"><span dir="rtl"><a href="https://lh4.googleusercontent.com/_IXiurIO55tc/TXVc2NbS_VI/AAAAAAAAAJc/WfjQRrNscV4/s720/PICT0325.jpg" rel="images" title="وصف الصورة الأولى">
	<span class="style3">الصورة الأولى</span></a></span><span class="style3"></p>
	<p class="style1"><span dir="rtl">
	<a href="https://lh5.googleusercontent.com/_IXiurIO55tc/TXVc2xlMoQI/AAAAAAAAAIc/lHDgUuEhbuc/s720/PICT0185.jpg" rel="images" title="وصف الصورة الثانية">الصورة الثانية</a></span></p>
	<p class="style1"></span><span dir="rtl"><a href="https://lh3.googleusercontent.com/_IXiurIO55tc/TXVc3zXeVoI/AAAAAAAAAIg/d0ekLvxwV0A/s720/PICT0217.jpg" rel="images" title="وصف الصورة الثالثة">
	<span class="style3">الصورة الثالثة</span></a></span></p>
	
	<h2 class="style4"><span dir="rtl">انتقال تضائلي<span lang="ar-sa"> بين 
	الصور:</span></span></h2>
	<p class="style1"><span dir="rtl"><a href="https://lh4.googleusercontent.com/_IXiurIO55tc/TXVc2NbS_VI/AAAAAAAAAJc/WfjQRrNscV4/s720/PICT0325.jpg" rel="imagesfade" title="وصف الصورة الأولى">
	<span class="style3">الصورة الأولى</span></a></span><span class="style3"></p>

	<p class="style1"><span dir="rtl"><a href="https://lh5.googleusercontent.com/_IXiurIO55tc/TXVc2xlMoQI/AAAAAAAAAIc/lHDgUuEhbuc/s720/PICT0185.jpg" rel="imagesfade" title="وصف الصورة الثانية">الصورة الثانية</a></span></p>
	<p class="style1"></span><span dir="rtl"><a href="https://lh3.googleusercontent.com/_IXiurIO55tc/TXVc3zXeVoI/AAAAAAAAAIg/d0ekLvxwV0A/s720/PICT0217.jpg" rel="imagesfade" title="وصف الصورة الثالثة">
	<span class="style3">الصورة الثالثة</span></a></span></p>
		
	<h2 class="style4"><span lang="ar-sa" dir="rtl">انتقال بين الصور بحيث تكون 
	كلها لها مقاس واحد:</span></h2>
	<p class="style1"><span dir="rtl"><a href="https://lh4.googleusercontent.com/_IXiurIO55tc/TXVc2NbS_VI/AAAAAAAAAJc/WfjQRrNscV4/s720/PICT0325.jpg" rel="imagessamesize" title="وصف الصورة الأولى">
	<span class="style3">الصورة الأولى</span></a></span><span class="style3"></p>
	<p class="style1"><span dir="rtl"><a href="https://lh5.googleusercontent.com/_IXiurIO55tc/TXVc2xlMoQI/AAAAAAAAAIc/lHDgUuEhbuc/s720/PICT0185.jpg" rel="imagessamesize" title="وصف الصورة الثانية">الصورة الثانية</a></span></p>
	<p class="style1"></span><span dir="rtl"><a href="https://lh3.googleusercontent.com/_IXiurIO55tc/TXVc3zXeVoI/AAAAAAAAAIg/d0ekLvxwV0A/s720/PICT0217.jpg" rel="imagessamesize" title="وصف الصورة الثالثة">
	<span class="style3">الصورة الثالثة</span></a></span></p>

		
	<h2 class="style4"><span lang="ar-sa">انتقال بين الصور بطريقة عرض الشرائح:</span></h2>
	<p class="style1"><span dir="rtl"><a href="https://lh4.googleusercontent.com/_IXiurIO55tc/TXVc2NbS_VI/AAAAAAAAAJc/WfjQRrNscV4/s720/PICT0325.jpg" rel="slideshow" title="وصف الصورة الأولى">
	<span class="style3">الصورة الأولى</span></a></span><span class="style3"></p>
	<p class="style1"><span dir="rtl"><a href="https://lh5.googleusercontent.com/_IXiurIO55tc/TXVc2xlMoQI/AAAAAAAAAIc/lHDgUuEhbuc/s720/PICT0185.jpg" rel="slideshow" title="وصف الصورة الثانية">الصورة الثانية</a></span></p>
	<p class="style1"></span><span dir="rtl"><a href="https://lh3.googleusercontent.com/_IXiurIO55tc/TXVc3zXeVoI/AAAAAAAAAIg/d0ekLvxwV0A/s720/PICT0217.jpg" rel="slideshow" title="وصف الصورة الثالثة">
	<span class="style3">الصورة الثالثة</span></a></span></p>
<hr>	
	
	
	<h2 class="style4"><span lang="ar-sa">فيديو من اليوتيوب:</span></h2>
	<p class="style1"><span dir="rtl"><a class='youtube' href="http://www.youtube.com/embed/WZ9yif8vZGI?rel=0" title="دعاء مؤثر للشيخ محمد الشنقيطي">
	<span class="style3">يوتوييوب</span></a></span></p>
<hr><span class="style3">

<h2 class="style4"><span lang="ar-sa">فيديو من فيمو:</span></h2>


	<p class="style1"><span dir="rtl"><a class='vimeo' href="http://player.vimeo.com/video/4440572" title="دعاء السديس الحرم المكي">فيمو</a></span></p>
<hr>
	
	<h2 class="style4"><span lang="ar-sa">صفحة خارجية:</span></span></h2>
	<h2 class="style4"><span dir="rtl"><a class='iframe' href="http://www.alblogger.com/">
	<span class="style3">صفحة خارجية</span></a></span></h2>
	<p class="style4">&nbsp;</p>
<p class="style11"><span lang="ar-sa" class="style12">
<a href="http://www.alblogger.com/">مدونة البلوقر</a> | </span>
<span class="style12"><strong>www.alblogger.com</strong></span></p>
	
	
</body>
</html>